<template>
  <div>
    <tb-heading :level="1">
      <a href="#">Hello world!</a>
    </tb-heading>
     <tc-heading :level="2">
        Hello world!
      </tc-heading>
  </div>
</template>

<script>
 var getChildrenTextContent = function(children) {
      return children.map(function(node) {
        return node.children ? getChildrenTextContent(node.children) : node.text
      }).join('')
    };
export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  components: {
    "tb-heading": {
      render: function (createElement) {
        return createElement(
          "h" + this.level, // tag name 标签名称
          this.$slots.default // 组件的子元素
        );
      },
      props: {
        level: {
          type: Number,
          required: true,
        },
      },
    },
    "tc-heading": {
      render: function (createElement) {
        var headingId = getChildrenTextContent(this.$slots.default)
          .toLowerCase()
          .replace(/\W+/g, "-")
          .replace(/(^\-|\-$)/g, "");
        return createElement("h" + this.level, [
          createElement(
            "a",
            {
              attrs: {
                name: headingId,
                href: "#" + headingId,
              },
              style: {
                color: "red",
                fontSize: "20px",
              },
              class: {
                foo: true,
                bar: false,
              },
              // DOM属性
              domProps: {
                innerHTML: "baz",
              },
              // 组件props
              props: {
                myProp: "bar",
              },
              // 事件监听基于 'on'
              // 所以不再支持如 'v-on:keyup.enter' 修饰语
              // 需要手动匹配 KeyCode
              on: {
                click: function (event) {
                  event.preventDefault();
                  console.log(111);
                },
              },
            },
            this.$slots.default
          ),
        ]);
      },
      props: {
        level: {
          type: Number,
          required: true,
        },
      },
    },
  },
};
</script>

<style lang="scss">
</style>
